<template>
  <div class="log-management">
    <el-row>
      <el-col :span="24">
        <div class=" el-table__body-wrapper is-scrolling-none">
          <el-table :data="tableData"
                    height="530"
                    border
                    :header-cell-style="{background:'#f5f5f5'}"
                    class="system-instyle">
            <!-- :highlight-current-row="true" -->
            <el-table-column prop="sys_log_id"
                             label="编号ID"
                             align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="oper_no"
                             label="帐户"
                             align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="module"
                             label="操作"
                             align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="exp_desc"
                             label="操作IP"
                             align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="oper_date"
                             label="操作时间"
                             align="center"
                             show-overflow-tooltip>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
      <el-col :span="24"
              class="footer-box">
        <el-pagination id="pagination"
                       @current-change="handleCurrentChange"
                       :current-page="requestParam.page"
                       :page-sizes="[10]"
                       layout="total,  sizes,prev, pager, next, jumper"
                       :total="total_count">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { logManagementApi } from '@/services/SystemSetting'
export default {
  data () {
    return {
      tableData: [],
      page: '',
      total_count: 0,
      pagesize: 10, // 每页的条数限制
      currentPage: 1,
      requestParam: {
        user_id: window.localStorage.user_id,
        key: '',
        start_date: '',
        end_date: '',
        page: 1,
        page_size: 10,
        is_page: 1
      }
    }
  },
  methods: {
    // 获取日志管理数据
    getLogManagement () {
      logManagementApi.getLogManaData({
        data: this.requestParam
      }).then((res) => {
        this.tableData = res.data.list;
        this.total_count = res.data.total_count;
      }).catch((error) => {
        console.log(error)
      })
    },
    // 数据列表分布
    handleCurrentChange (page) {
      this.requestParam.page = page
      this.getLogManagement()
    }
  },
  created () {
    this.getLogManagement()
  }
}
</script>
<style lang="scss" scoped>
// /deep/ #pagination .el-pager .active:hover {
//   color: #fff;
// }
// /deep/ #pagination .el-pager li:hover {
//   color: #1abc9c;
// }
// /deep/ .opeate_btn {
//   padding: 8px 20px;
// }
.log-management {
  padding: 20px;
  // /deep/ .current-row > td {
  //   background: #1890ff !important;
  //   color: white;
  // }
  // /deep/ .el-table__body tr.current-row > td .el-button {
  //   color: #fff;
  // }
  .footer-box {
    text-align: center;
    margin-top: 20px;
  }
  // /deep/ #pagination .el-pager .active {
  //   background: #1abc9c;
  //   color: white;
  // }
}
</style>
